import * as React from 'react'
import { View, Image, } from '@tarojs/components'
import './index.scss'


export default () => {


  let turntable: Record<string, any> = {
    light: null,   // 灯
    lightNum: 36,// 转盘上的灯
    itemNum: 6, // 转盘平均分几块
    turntable: null,  //转盘
    gift: null, // 转盘上的中奖结果图
    pointer: null, // 转盘指针
    isGoing: false, // 游戏是否开始
    init() {
      // 初始化灯
      let lightFragment = document.createDocumentFragment();
      for (let i = 0; i < this.lightNum; i++) {
        let lightItem = document.createElement('span');
        let deg = (360 / this.lightNum) * i
        lightItem.style.transform = `rotate(${deg}deg)`;
        lightFragment.appendChild(lightItem);
      }
      this.light.appendChild(lightFragment);


      //转盘
      let giftFragment = document.createDocumentFragment();
      for (let i = 0; i < this.itemNum; i++) {
        let deg = (360 / this.itemNum) * i;
        // console.log(i, deg)
        let giftItem = document.createElement('div');
        giftItem.style.transform = `rotate(${deg}deg)`;
        giftItem.className = "giftItem"


        let div = document.createElement('div')
        let img = document.createElement('img')
        let span = document.createElement('span')
        img.className = 'gift_img'
        span.className = 'gift_text'
        // img.src = 'https://qiniu.actiiot.com/wfang/v3/icon/arrow_right_blue.png'
        img.src = require('./lettery_score.png')
        span.innerHTML = '积分' + i



        div.appendChild(img)
        div.appendChild(span)
        giftItem.appendChild(div)
        giftFragment.appendChild(giftItem)
      }
      this.gift.appendChild(giftFragment);
      // 给点击抽奖按钮添加点击事件
      this.pointer.onclick = this.gameStart.bind(this)
    },
    gameStart() {
      // console.log('this.isGoing', this.isGoing)
      if (this.isGoing) {
        return
      }
      this.isGoing = true;


      let rotateItemDeg = 3 * (360 / this.itemNum); // 每个item旋转角度, 第一个不用旋转
      let rotate = rotateItemDeg + 10 * 360;
      let rotateSpeed = (rotateItemDeg / 360 * 1 + 10).toFixed(2);
      // 重置转盘样式
      this.turntable.removeAttribute('style');
      // 保证下一次旋转动画生效
      setTimeout(() => {
        this.turntable.style.transform = `rotate(${rotate}deg)`;
        this.turntable.style.transition = `transform ${rotateSpeed}s ease-out`;
        // this.turntable.style.transitionDuration = '10s';
        this.turntable.style.transitionTimingFunction = 'cubic-bezier(.7,.35,0,1)';
      }, 10)

      // 3. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定
      setTimeout(() => {
        this.isGoing = false;
        console.log('中奖结果：rotateSpeed', rotateSpeed, 'rotate', rotate, 'rotateItemDeg', rotateItemDeg, 'this.isGoing', this.isGoing);
      }, (+rotateSpeed) * 1000);

      // setTimeout(() => {
      //   this.isGoing = false;
      //   console.log('中奖结果：rotateSpeed', rotateSpeed, 'rotate', rotate, 'rotateItemDeg', rotateItemDeg, 'this.isGoing', this.isGoing);
      // }, (10) * 1000);
    }
  }


  React.useEffect(() => {

    turntable.light = document.querySelector('#turntable_light');
    turntable.turntable = document.querySelector('#turntable');
    turntable.gift = document.querySelector('#turntable_gift');
    turntable.pointer = document.querySelector('#turntable_pointer');
    turntable.init()

  }, [])
  return (

    <View className="turntable-wrap">
      <View className="light" id="turntable_light"></View>
      <View className="turntable" id="turntable">
        <View className="turntable_bg">
          <View className="shape_half">
            <View className="shanxin turntable_bg_color1 rotate_f90deg" ></View>
            <View className="shanxin turntable_bg_color2 rotate_f30deg" ></View>
            <View className="shanxin turntable_bg_color1 rotate_30deg" ></View>
          </View>
          <View className="shape_half rotate_270deg" >
            <View className="shanxin turntable_bg_color2 rotate_f90deg" ></View>
            <View className="shanxin turntable_bg_color1 rotate_f30deg" ></View>
            <View className="shanxin turntable_bg_color2 rotate_30deg" ></View>
          </View>
        </View>
        <View className="gift" id="turntable_gift"></View>
      </View>
      <Image src={require("./turntable_pointer.png")} id="turntable_pointer" className='pointer' />
    </View>

  )
}

